<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>Options</title>
        <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
    </h:head>
    <h:body>
        <ui:composition>
            
            
                <script type="text/javascript">
                     jQuery('[id="tabViewMenu:j_idt26:j_idt27:frmThemes"]').val('tes');
                    onClickImg = function(theme){
                       jQuery('#tabViewMenu\\:j_idt88\\:cmbTheme').val(theme);
                     //  jQuery('[id="tabViewMenu:j_idt26:j_idt27:frmThemes:cmbThemes"]').text(theme);
        //                $("#tabViewMenu\\:j_idt26\\:j_idt27\\:frmThemes\\:cmbTheme").val(theme)   ;
          //              $("#tabViewMenu\\:j_idt26\\:j_idt27\\:frmThemes\\:themeSwitcher").val(theme)   ;
                            //
                            
            //              alert(jQuery(PrimeFaces.core.Utils.escapeClientId("cmbTheme")).val());

              changeTheme({themeChoose:theme});          
                     
                        
                    }
                    
                </script>  
                
            
                
                <p:themeSwitcher style="width:150px" value="flick" effect="fade" rendered="true">  
                      <!--<f:selectItem itemLabel="#{themeSwitcherBean.theme}"   /> -->
                      <f:selectItems value="#{themeSwitcherBean.themes}"  />  
        </p:themeSwitcher>
               <h:form id="frmThemes">
                   <h:inputText  id="cmbTheme"  value="#{themeSwitcherBean.theme}" />
                   <p:commandLink  onsuccess="alert('sukses')" update=":tabViewMenu:j_idt26:j_idt27:cmbTheme"  actionListener="#{themeSwitcherBean.chooseTheme}" ><!-- -->
                               
                                <f:param name="themeChoose" value="flick"></f:param>
                                
                                <h:outputText value="tes"/>                              
                              </p:commandLink>
                <p:dataGrid var="theme"  value="#{themeSwitcherBean.advancedThemes}" columns="6" rows="15" >
                    <p:column >
                        <p:panel header="#{theme.name}" style="text-align: center">
                           <!-- <p:commandLink  onsuccess="alert('sukses')" update=":tabViewMenu:j_idt26:j_idt27:cmbTheme"  actionListener="#{themeSwitcherBean.chooseTheme}" >
                               
                                <f:param name="themeChoose" value="#{theme.jarName}"></f:param>
                            -->     
                            <p:graphicImage onclick="onClickImg('#{theme.jarName}')" style="cursor: pointer;" alt="#{theme.name}" value="#{theme.image}"/>                                
                            <!--  </p:commandLink>  -->
                            
                        </p:panel>
                        <p:remoteCommand name="changeTheme" update=":tabViewMenu:frmTheme:cmbTheme" actionListener="#{themeSwitcherBean.chooseTheme}">
                            <!-- <f:setPropertyActionListener value="#{theme.name}" target="cmbTheme"/> -->
                        </p:remoteCommand>
                    </p:column>
                </p:dataGrid>
                                
              
             <!--       <h:panelGrid columns="2" cellpadding="10">
                        <h:outputText value="Default Switcher:" />   
        <p:themeSwitcher style="width:150px">  
            <f:selectItem itemLabel="Choose Theme" itemValue="" />  
            <f:selectItems value="#{themeSwitcherBean.themes}" />  
        </p:themeSwitcher> 
                        
                        <h:outputText value="Stateful Switcher:" />   
                        <p:themeSwitcher value="#{themeSwitcherBean.themes}" style="width:150px" effect="fade">  
            <f:selectItem itemLabel="Choose Theme" itemValue="" />  
            <f:selectItems value="#{themeSwitcherBean.themes}" />  
            <p:ajax listener="#{themeSwitcherBean.saveTheme}" />  
        </p:themeSwitcher>  
                        <h:outputText value="Theme Preview:" />   
        <p:themeSwitcher style="width:150px" effect="fade" var="t">  
            <f:selectItem itemLabel="Choose Theme" itemValue="" />  
            <f:selectItems value="#{themeSwitcherBean.advancedThemes}" var="theme" itemLabel="#{theme.name}" itemValue="#{theme}"/>  
  
            <p:column>  
                <p:graphicImage value="/images/themes/#{t.image}" width="90" height="60"/>  
            </p:column>  
  
            <p:column>  
                #{t.name}  
            </p:column>  
        </p:themeSwitcher>
                    </h:panelGrid> -->
           
            </h:form>
        </ui:composition>
        
    </h:body>
</html>
